<!--设备管理板块-->

<!--用户权限说明-->
<!--管理员：代码：1，可以做所有的操作-->
<!--问题编辑人员：代码：2，可以做问题的修改操作-->
<template>
  <div style="margin: 0;padding: 0">
    <el-container>
      <!--页面表头设计-->
      <el-header style="height: 7vh">
        <el-link class="headMain" href="http://10.255.96.48:3404/">俄动力质量管理系统</el-link>
        <span class="center-text">低频作业指导书</span>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <div>
            <el-card class="box-card">
              <div slot="header" class="clearfix" style="text-align: left">
                <span>选择提示：</span>
              </div>
              <div style="text-align: left">
                该项目下有{{tableData.length}}条记录
              </div>
            </el-card>
          </div>
          <div style="margin-top: 10px">
            <el-button style="width: 100%" @click="typeTable(1)" :style="background1">换刀作业指导书</el-button>
          </div>
          <div style="margin-top: 10px">
            <el-button style="width: 100%" @click="typeTable(2)" :style="background2">换型作业指导书</el-button>
          </div>
          <div style="margin-top: 10px">
            <el-button style="width: 100%" @click="typeTable(3)" :style="background3">设备操作说明书</el-button>
          </div>


        </el-aside>
        <el-container>
          <!--主题设计-->
          <el-main>
            <div style="display: flex;height: 75vh;margin-top: 10px">
              <div style="width: 220px; border: 1px solid blue; box-sizing: border-box;overflow-y: auto">
                <div style="margin-top: 10px;text-align: center">
                  <span style="color: red;font-size: 18px">表单信息</span>
                  <el-link style="margin-left: 10px" @click="editTable(1)"><i class="el-icon-circle-plus-outline"></i></el-link>
                  <el-link style="margin-left: 10px" @click="editTable(2)"><i class="el-icon-edit"></i></el-link>
                  <el-link style="margin-left: 10px" @click="editTable(3)"><i class="el-icon-delete"></i></el-link>
                  <hr>
                </div>
                <div style="margin: 8px;text-align: left">
                      <span v-if="tableDataTemp.lineName===''"></span>
                  <span v-else-if="languageS==='chinese'">线体名称：{{tableDataTemp.lineName.split('/')[0]}}</span>
                  <span v-else-if="languageS==='english'">线体名称：{{tableDataTemp.lineName.split('/')[1]}}</span>
                  <span v-else-if="languageS==='russian'">线体名称：{{tableDataTemp.lineName.split('/')[2]}}</span>
                  <hr>
                </div>
                <div style="margin:8px;text-align: left">
                  <span>工序号：{{tableDataTemp.op}}</span>
                  <hr>
                </div>
                <div style="margin:8px;width: 150px">
                  <div v-if="tableDataTemp.fileName===''"></div>
                  <div style="color: #0269fa;font-size: 18px;white-space: normal; overflow-wrap: break-word;"
                        v-else-if="languageS==='chinese' && tableDataTemp.fileName.split('|*|').length===3">{{tableDataTemp.fileName.split('|*|')[0]}}</div>
                  <div style="color: #0269fa;font-size: 18px;white-space: normal; overflow-wrap: break-word;"
                       v-else-if="languageS==='english' && tableDataTemp.fileName.split('|*|').length===3">{{tableDataTemp.fileName.split('|*|')[1]}}</div>
                  <div style="color: #0269fa;font-size: 18px;white-space: normal; overflow-wrap: break-word;"
                       v-else-if="languageS==='russian' && tableDataTemp.fileName.split('|*|').length===3">{{tableDataTemp.fileName.split('|*|')[2]}}</div>
                  <div style="color: #0269fa;font-size: 18px;white-space: normal; overflow-wrap: break-word;"
                       v-else>{{tableDataTemp.fileName}}</div>
                  <hr>
                </div>
                <div style="margin: 8px;text-align: left">
                  <span>版本号：最新</span>
                  <hr>
                </div>
                <div style="margin: 8px;text-align: left">
                  <span >编制日期：</span>
                  <span>{{tableDataTemp.writeDate}}</span>
                  <hr>
                </div>
                <div style="margin: 8px;text-align: left">
                  <span>执行日期：</span>
                  <span>{{tableDataTemp.executeDate}}</span>
                  <hr>
                </div>
                <div style="margin: 8px;text-align: left">
                  <span>文件编号：</span>
                  <span>{{tableDataTemp.fileNum}}</span>
                  <hr>
                </div>
                <div style="margin: 8px;text-align: left">
                  <span>编制：</span>
                  <span>{{tableDataTemp.writeUse}}</span>
                  <hr>
                </div>
                <div style="margin: 8px;text-align: left">
                  <span>审核：</span>
                  <span >{{tableDataTemp.examineUse}}</span>
                  <hr>
                </div>
                <div style="margin: 8px;text-align: left">
                  <span>批准：</span>
                  <span>{{tableDataTemp.ratifyUse}}</span>
                  <hr>
                </div>
                <div style="margin: 8px;text-align: left">
                  <span>会签：</span>
                  <span>{{tableDataTemp.countersignUse}}</span>
                  <hr>
                </div>
              </div>
              <div style="flex-grow: 1;
                  border: 1px solid blue;
                  box-sizing: border-box;
                  margin-left: 8px;
                  padding: 8px;
                  display: flex;
                  width: 100%">
                <div style="flex: 1;height: 75vh;scroll-margin-right: 8px">
                  <el-table
                      :data="workBook"
                      border
                      style="width: 100%"
                      height="72vh">
                    <el-table-column
                        type="expand"
                        v-slot:default="props">
                      <div style="margin-right: 10px;margin-left: 20px">
                        <span>注意点说明：</span>
                        <span v-if="languageS==='chinese' && props.row.problem.split('|*|').length===3">{{props.row.problem.split('|*|')[0]}}</span>
                        <span v-else-if="languageS==='english' && props.row.problem.split('|*|').length===3">{{props.row.problem.split('|*|')[1]}}</span>
                        <span v-else-if="languageS==='russian' && props.row.problem.split('|*|').length===3">{{props.row.problem.split('|*|')[2]}}</span>
                        <span v-else>{{props.row.problem}}</span>
                      </div>
                    </el-table-column>
                    <el-table-column
                        v-slot:default="scope"
                        label="序号"
                        width="50">
                      {{scope.$index+1}}
                      <el-link @click="editBook(2,scope)"><i class="el-icon-download"></i></el-link>
                    </el-table-column>
                    <el-table-column
                        prop="work"
                        label="步骤内容"
                        v-slot:default="scope">
                      <span v-if="languageS==='chinese' && scope.row.work.split('|*|').length===3">{{scope.row.work.split('|*|')[0]}}</span>
                      <span v-else-if="languageS==='english' && scope.row.work.split('|*|').length===3">{{scope.row.work.split('|*|')[1]}}</span>
                      <span v-else-if="languageS==='russian' && scope.row.work.split('|*|').length===3">{{scope.row.work.split('|*|')[2]}}</span>
                      <span v-else>{{scope.row.work}}</span>
                      <el-link style="margin-left: 20px" @click="editBook(1,scope)"><i class="el-icon-edit"></i></el-link>
                      <el-link style="margin-left: 10px" @click="editBook(3,scope)"><i class="el-icon-delete"></i></el-link>
                    </el-table-column>
                  </el-table>
                </div>
                <div style="flex: 1;">
                  <el-card shadow="hover" style="height: 72vh;margin-left: 8px">
                    <div style="text-align: left">
                      <el-link type="primary" @click="switchVideo(1)">图片</el-link>
                      <el-link style="margin-left: 20px" @click="editVideoAndImage(1)"><i class="el-icon-picture"></i></el-link>
                      <el-link type="primary" style="margin-left: 20px" @click="switchVideo(2)">视频</el-link>
                      <el-link type="primary" style="margin-left: 20px" @click="editVideoAndImage(2)"><i class="el-icon-video-camera-solid"></i></el-link>
                      <el-link type="primary" style="margin-left: 20px" @click="switchVideo(3)">修改记录</el-link>
                    </div>
                    <div style="width: 100%;height: 62vh;margin-top: 8px">
                      <div class="block" v-if="switchVideoUse===1">
                        <el-carousel trigger="click" height="62vh">
                          <el-carousel-item v-for="(item, index) in itemView" :key="index">
                            <el-image
                                style="width: 100%; height: 100%"
                                :src="item"
                                fit='contain'></el-image>
                            <el-link></el-link>
                          </el-carousel-item>
                        </el-carousel>
                      </div>
                      <div class="block" v-else-if="switchVideoUse===2" style="height: 100%">
                        <video width="100%"
                               height="100%"
                               :src="videoUrl"
                               controls
                               @ended="onVideoEnded">
                        </video>
                      </div>
                      <div class="block" v-else-if="switchVideoUse===3">
                        <el-table
                            :data="editRecord"
                            border
                            style="width: 100%"
                            height="72vh">
                          <el-table-column
                              type="expand"
                              v-slot:default="scope">
                            <div style="margin-right: 10px;margin-left: 20px">
                              <span>注意点说明：</span>
<!--                              <span v-if="languageS==='chinese' && scope.row.problem.split('|*|').length===3">{{scope.row.problem.split('|*|')[0]}}</span>-->
<!--                              <span v-else-if="languageS==='english' && scope.row.problem.split('|*|').length===3">{{scope.row.problem.split('|*|')[1]}}</span>-->
<!--                              <span v-else-if="languageS==='russian' && scope.row.problem.split('|*|').length===3">{{scope.row.problem.split('|*|')[2]}}</span>-->
                              <span>{{scope.row.problem}}</span>
                            </div>
                          </el-table-column>
                          <el-table-column
                              v-slot:default="scope"
                              label="序号"
                              width="50">
                            {{scope.$index+1}}
                          </el-table-column>
                          <el-table-column
                              prop="work"
                              label="步骤内容"
                              v-slot:default="scope">
<!--                            <span v-if="languageS==='chinese' && scope.row.work.split('|*|').length===3">{{scope.row.work.split('|*|')[0]}}</span>-->
<!--                            <span v-else-if="languageS==='english' && scope.row.work.split('|*|').length===3">{{scope.row.work.split('|*|')[1]}}</span>-->
<!--                            <span v-else-if="languageS==='russian' && scope.row.work.split('|*|').length===3">{{scope.row.work.split('|*|')[2]}}</span>-->
                            <span>{{scope.row.work}}</span>
                          </el-table-column>
                        </el-table>
                      </div>
                    </div>
                  </el-card>
                </div>
              </div>
            </div>
          </el-main>
          <el-footer>
            <el-button plain size="small" @click="chooseLanguage('chinese')">中  文</el-button>
            <el-button plain size="small" @click="chooseLanguage('russian')">Русский язык</el-button>
            <el-button plain size="small" @click="chooseLanguage('english')">English</el-button>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>

    <!--弹窗放置区-->
    <!--低频作业指导书表头编辑的弹窗-->
    <el-dialog
        :title="titleUse"
        :visible.sync="dialogTableHeader"
        width="30%"
        :before-close="handleClose">
      <el-form ref="formTableData" status-icon :rules="rulesForm" :model="formTableData" label-width="80px">
        <el-form-item label="车间名称" prop="workshop">
          <el-select v-model="formTableData.workshop" placeholder="请选择" style="width: 100%" @change="(val) => selectChange(val, 1)">
            <el-option
                v-for="item in optionWorkshop"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="线体名称" prop="lineName">
          <el-select
              v-model="formTableData.lineName"
              placeholder="请选择"
              style="width: 100%"
              :disabled="disabledLineName">
            <el-option
                v-for="item in optionLine"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <div style="display: flex; /* 启用 Flexbox 布局 */justify-content: space-between; /* 子元素之间的间隔平均分布 */  ">
          <el-form-item label="工序号" style="flex:1" prop="op">
            <el-select
                v-model="formTableData.op"
                placeholder="请选择"
                style="width: 100%"
                :disabled="disabledOp">
              <el-option
                  v-for="item in optionOp"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item  label="版本号" style="flex:1" prop="editionNum">
            <el-select
                v-model="formTableData.editionNum"
                placeholder="请选择"
                style="width: 100%">
              <el-option
                  v-for="item in optionEditionNum"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <el-form-item label="文件名称" prop="fileName">
          <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容,语言使用“|*|”符号分割"
              v-model="formTableData.fileName">
          </el-input>
        </el-form-item>
        <el-form-item label="编制日期" prop="writeDate">
          <el-date-picker
              v-model="formTableData.writeDate"
              type="date"
              placeholder="选择日期"
              style="width: 100%">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="执行日期" prop="executeDate">
          <el-date-picker
              v-model="formTableData.executeDate"
              type="date"
              placeholder="选择日期"
              style="width: 100%">
          </el-date-picker>
        </el-form-item>
        <div style="font-size: 18px;color: #0269fa;margin-bottom: 10px">指定相关人员</div>
        <div style="display: flex; /* 启用 Flexbox 布局 */justify-content: space-between; /* 子元素之间的间隔平均分布 */  ">
          <el-form-item label="编制人" style="flex:1" prop="writeUse">
            <el-input  :placeholder="useName" disabled="disabled"></el-input>
          </el-form-item>
          <el-form-item  label="审核人" style="flex:1" prop="examineUse">
            <el-input v-model="formTableData.examineUse" placeholder="请输入内容"></el-input>
          </el-form-item>
        </div>
        <div style="display: flex; /* 启用 Flexbox 布局 */justify-content: space-between; /* 子元素之间的间隔平均分布 */  ">
          <el-form-item label="会签人" style="flex:1" prop="countersignUse">
            <el-input v-model="formTableData.countersignUse" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item  label="批准人" style="flex:1" prop="ratifyUse">
            <el-input v-model="formTableData.ratifyUse" placeholder="请输入内容"></el-input>
          </el-form-item>
        </div>
        <el-form-item label="提交结果">
          <el-button type="primary" @click="onSubmit(editTableUse,'formTableData')">立即创建</el-button>
          <el-button @click="dialogTableHeader=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--输入两个文本的弹窗类型-->
    <el-dialog
        :title="titleUse"
        :visible.sync="dialogVisibleText"
        width="50%"
        :before-close="handleClose">
      <div style="text-align: left">
        <span style="font-size: 18px">{{prompt1}}</span>
        <el-input placeholder="请输入内容"
                  v-model="inputText1"
                  style="width: 100%;margin-top: 8px"
                  type="textarea"
                  :rows="3"></el-input>
      </div>
      <div style="margin-top: 10px;text-align: left">
        <span style="font-size: 18px">{{prompt2}}</span>
        <el-input placeholder="请输入内容"
                  v-model="inputText2"
                  style="width: 100%;margin-top: 8px"
                  type="textarea"
                  :rows="3"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleText = false">取 消</el-button>
    <el-button type="primary" @click="saveDataTextTwo">确 定</el-button>
  </span>
    </el-dialog>
    <!--点击上传照片-->
    <el-dialog
        :visible.sync="dialogPicture"
        :title="titleUse">
      <div style="margin-top: 10px;text-align: center; border: 1px solid #0269fa;padding: 10px">
        <el-upload
            action="http://10.255.96.48:3499/russiaEngine/"
            list-type="picture-card"
            :auto-upload="false"
            :on-change="(file, fileList) => saveFileAnnex(file, fileList)"
            :file-list="PictureList" >
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{file}">
            <img
                class="el-upload-list__item-thumbnail"
                :src="file.url" alt="">
            <span class="el-upload-list__item-actions">
                                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                              <i class="el-icon-zoom-in"></i>
                                </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                                  <i class="el-icon-download"></i>
                                </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                  <i class="el-icon-delete"></i>
                                </span>
                              </span>
          </div>
        </el-upload>
      </div>
    </el-dialog>
    <!--点击上传照片中的放大按钮，查看照片-->
    <el-dialog :visible.sync="dialogPictureAnnex">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <!--点击上传录像-->
    <el-dialog
        :visible.sync="dialogVideo"
        :title="titleUse">
      <div style="margin-top: 10px;text-align: center; border: 1px solid #0269fa;padding: 10px">
        <el-upload
            action="http://10.255.96.48:3499/russiaEngine/"
            list-type="picture-card"
            :auto-upload="false"
            :on-change="(file, fileList) => saveFileAnnex(file, fileList)"
            :file-list="videoList" >
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{file}">
            <img
                class="el-upload-list__item-thumbnail"
                :src="file.url" alt="">
            <span class="el-upload-list__item-actions">
                                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                              <i class="el-icon-zoom-in"></i>
                                </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                                  <i class="el-icon-download"></i>
                                </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                  <i class="el-icon-delete"></i>
                                </span>
                              </span>
          </div>
        </el-upload>
      </div>
    </el-dialog>

    <!--抽屉放置区域-->
    <el-drawer
        :title="drawerTitle"
        :visible.sync="drawer"
        direction="rtl"
        size="50%">
      <el-table
          :data="tableData"
          style="width: 100%;margin-left: 25px;margin-right: 25px"
          highlight-current-row="highlight-current-row">
        <el-table-column
            prop="workshop"
            label="车间名称"
            sortable
            width="180"
            v-slot:default="scope">
          <div style="width: 100%" @click="tableDataClick(1,scope)">
            <span v-if="languageS==='chinese'">{{scope.row.workshop.split('/')[0]}}</span>
            <span v-else-if="languageS==='english'">{{scope.row.workshop.split('/')[1]}}</span>
            <span v-else-if="languageS==='russian'">{{scope.row.workshop.split('/')[2]}}</span>
          </div>
        </el-table-column>
        <el-table-column
            prop="lineName"
            label="线体名称"
            sortable
            width="180"
            v-slot:default="scope">
          <div style="width: 100%" @click="tableDataClick(1,scope)">
            <span v-if="languageS==='chinese'">{{scope.row.lineName.split('/')[0]}}</span>
            <span v-else-if="languageS==='english'">{{scope.row.lineName.split('/')[1]}}</span>
            <span v-else-if="languageS==='russian'">{{scope.row.lineName.split('/')[2]}}</span>
          </div>
        </el-table-column>
        <el-table-column
            prop="op"
            label="工序"
            sortable
            width="80"
            :formatter="formatter"
            v-slot="scope">
          <div style="width: 100%" @click="tableDataClick(1,scope)">
            {{scope.row.op}}
          </div>
        </el-table-column>
        <el-table-column
            prop="fileName"
            label="文件名称"
            v-slot:default="scope">
          <div style="width: 100%" @click="tableDataClick(1,scope)">
            <span v-if="languageS==='chinese' && scope.row.fileName.split('|*|').length===3">{{scope.row.fileName.split('|*|')[0]}}</span>
            <span v-else-if="languageS==='english' && scope.row.fileName.split('|*|').length===3">{{scope.row.fileName.split('|*|')[1]}}</span>
            <span v-else-if="languageS==='russian' && scope.row.fileName.split('|*|').length===3">{{scope.row.fileName.split('|*|')[2]}}</span>
            <span v-else>{{scope.row.fileName}}</span>
          </div>
        </el-table-column>
      </el-table>
    </el-drawer>
  </div>
</template>

<script>

import {filepath, machiningAssembly, OpAssembly, optionWorkshop, workshopAssembly} from "@/configUse";
import _ from "lodash";

export default {
  name: "changeModel",
  components: {},
  data() {
    //校验数据是否为空
    var dataNull = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('数据不能为空，请输入/选择'));
      }
      callback();
    }

    return {
      activeName:'first',
      //控制显示图片还是显示视频播放器的控件变量
      switchVideoUse:1,
      //抽屉相关的变量
      //抽屉的展示
      drawer: false,
      //抽屉的提示信息
      drawerTitle:'提示',

      //用户点击了选择的类型后，按钮调整颜色的变量
      background1: '',//换刀作业指导书
      background2: '',//换型作业指导书
      background3: '',//机床操作说明书

      //用户权限相关的变量
      useName:'',//用户名称
      useId:'',//用户编号
      usePower:'',//用户权限
      //语言选择的变量
      languageS:'chinese',
      homepageName:'俄罗斯动力质量管理系统',//主页变化的语言选择

      //作业指导书的内容
      workBook:[
        {
          id:0,
          work:'请编辑',
          problem:'请输入'
        }],
      //作业指导书的修改内容
      editRecord:[
        {
          id:0,
          work:'请编辑',
          problem:'请输入'
        }],
      //大表的内容
      tableData:[
        {
          //id主键
          id:'',
          //车间名称
          workshop:'',
          //线体名称
          lineName:'',
          //工序名称
          op:'',
          //文件名称
          fileName:'',
          // 版本号
          editionNum:'',
          //编制日期
          writeDate:'',
          //执行日期
          executeDate:'',
          //文件编号
          fileNum:'',
          //编制
          writeUse:'',
          //审核
          examineUse:'',
          //批准
          ratifyUse:'',
          //会签
          countersignUse:'',
          //作业指导书
          workBook:'',
          //图片附件
          bookImage:'',
          // 视频附件
          bookVideo:'',
          // 修改记录
          editRecord:'',
          //指导书类型
          bookType:'',
          //删除标记位
          deleteSign:'',
          //创建时间
          establishTime:'',
          //修改时间
          UpdateTime:'',
        }
      ],
      //弹窗控制用的变量
      //弹窗的表头提示
      titleUse:'提示',
      //表头编辑弹窗的控制变量
      dialogTableHeader:false,
      //控制两个文本框的弹窗变量
      dialogVisibleText:false,
      //上传照片的弹窗
      dialogPicture:false,
      //上传图片的弹窗提示
      dialogPictureAnnex:false,
      //上传视频的弹窗提示
      dialogVideo:false,
      //文本弹窗窗口中，需要的输入提示
      prompt1:'步骤',
      prompt2:'注意点',
      //文本框弹窗中，绑定的两个输入框的内容
      inputText1:'',
      inputText2:'',

      //用户选择的记录
      //用户选择的是那个类型的作业指导书
      typeTableUse:0,
      //用户选择了那个表头操作：1.增加，2.编辑，3.删除；
      editTableUse:0,
      //用户现在了那种作业指导书的编制类型 1.编辑，2.增加，3.删除
      editBookType:0,
      //用户现了是图片的编辑还是视频编辑
      editVideoAndImageUse:0,
      //用户当前点击了大表中的那一个，是一个scope格式。含着对表中的索引值。
      //用户点击了那个主表
      tableDataScope:null,
      //用户点击了那个作业指导书的表
      workBookScope:null,

      //表头用到的临时变量
      tableDataTemp:{
        //id主键
        id:'',
        //车间名称
        workshop:'',
        //线体名称
        lineName:'',
        //工序名称
        op:'',
        //文件名称
        fileName:'',
        // 版本号
        editionNum:'',
        //编制日期
        writeDate:'',
        //执行日期
        executeDate:'',
        //文件编号
        fileNum:'',
        //编制
        writeUse:'',
        //审核
        examineUse:'',
        //批准
        ratifyUse:'',
        //会签
        countersignUse:'',
        //作业指导书
        workBook:'',
        //图片附件
        BookImage:'',
        // 视频附件
        BookVideo:'',
        // 修改记录
        editRecord:'',
        //指导书类型
        bookType:'',
        //删除标记位
        deleteSign:'',
        //创建时间
        establishTime:'',
        //修改时间
        UpdateTime:'',
      },
      //输入表单的控件
      formTableData:{
        //id主键
        id:'',
        //车间名称
        workshop:'',
        //线体名称
        lineName:'',
        //工序名称
        op:'',
        //文件名称
        fileName:'',
        // 版本号
        editionNum:'',
        //编制日期
        writeDate:'',
        //执行日期
        executeDate:'',
        //文件编号
        fileNum:'',
        //编制
        writeUse:'',
        //审核
        examineUse:'',
        //批准
        ratifyUse:'',
        //会签
        countersignUse:'',
        //作业指导书
        workBook:'',
        //图片附件
        BookImage:'',
        // 视频附件
        BookVideo:'',
        // 修改记录
        editRecord:'',
        //指导书类型
        bookType:'',
        //删除标记位
        deleteSign:'',
        //创建时间
        establishTime:'',
        //修改时间
        UpdateTime:'',
      },
      //表单校验变量
      rulesForm:{
        workshop:[{ validator: dataNull, trigger: 'blur'},],
        lineName:[{ validator: dataNull, trigger: 'blur'},],
        op:[{ validator: dataNull, trigger: 'blur'},],
        fileName:[{ validator: dataNull, trigger: 'blur'},],
        editionNum:[{ validator: dataNull, trigger: 'blur'},],
        writeDate:[{ validator: dataNull, trigger: 'blur'},],
        executeDate:[{ validator: dataNull, trigger: 'blur'},],
        examineUse:[{ validator: dataNull, trigger: 'blur'},],
        ratifyUse:[{ validator: dataNull, trigger: 'blur'},],
        countersignUse:[{ validator: dataNull, trigger: 'blur'},]
      },

      //固定选择器用到的变量
      //车间名称
      optionWorkshop: optionWorkshop,
      //线体名称
      optionLine:workshopAssembly,
      //工序名称
      optionOp:OpAssembly,
      //版本号
      optionEditionNum:[{
        value:1,
        label:'最新'
      },],
      //线体名称选择器的控制是否可以用
      disabledLineName:true,
      //工序的选择器，控制是否可用
      disabledOp:false,

      //图片相关的数据，录像相关的项目
      itemView:[],//展示图片了路径,用在了走马灯部位
      editPictureType:0,//修改图片的类型，主要记录了
      PictureList:[],//图片文件的
      videoList:[],//录像的文件列表
      disabled:false,//图片显示的控制变量
      dialogImageUrl:'',//弹窗显示的图片路径
      videoUrl:filepath+'normal video.mp4',//视频的地址
    }
  },
  watch: {},
  methods: {
    chooseLanguage(language){
      this.languageS=language
    },
    //用户现在选的是哪一种作业指导书
    typeTable(doe){
      this.typeTableUse=doe
      if (this.typeTableUse===1){
        //选择的是换刀作业指导书
        //设置按钮颜色
        this.background1 = {backgroundColor: '#0269fa'}
        this.background2 = ''
        this.background3 = ''
        //查询数据
        this.inquiryType('换刀作业')
        //打开抽屉
        this.drawerTitle='换刀作业要领书'
        this.drawer=true

      }
      else if (this.typeTableUse===2){
        //是换型指导书
        this.background1 = ''
        this.background2 = {backgroundColor: '#0269fa'}
        this.background3 = ''
        //查询数据
        this.inquiryType('换型作业')
        //打开抽屉
        this.drawerTitle='换型作业要领书'
        this.drawer=true

      }
      else if (this.typeTableUse===3){
        //是换型指导书
        this.background1 = ''
        this.background2 = ''
        this.background3 = {backgroundColor: '#0269fa'}
        //查询数据
        this.inquiryType('设备操作说明书')
        //打开抽屉
        this.drawerTitle='设备操作说明书'
        this.drawer=true

      }
    },
    //辅助函数，依据用户现在的是哪一种作业指导书，筛选出所有的数据来
    inquiryType(type){
      //向后端发送请求，把查询出来的作业指导书类别赋值给大表。
      this.$request.post('/inquiryType',type).then(result=>{
            if (result.code === 401) {
              this.$router.push('UserLogin')
              alert("您未登录，请登录")
            } else {
              this.tableData=result.data
            }
      })
    },
    //主表排序用的函数
    formatter(row, column) {
      console.log(column)
      return row.address;
    },
    //查询用户信息的函数
    inquiry(){
      //输入用户编号，向后端查询信息
      const useId=localStorage.getItem('userName').replace(/"/g, '');
      this.$request.post('/useQueryPower',{
        queryFiledName:'changeModel',
        userId:useId,
      }).then(result=>{
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        }else {
          this.useName=result.data.name
          this.usePower=result.data.changeModel
          this.useId=useId
          console.log(this.useId,this.usePower,this.useName)
        }
      })
    },
    // 通用，弹窗关闭的时候
    handleClose(done) {
      this.$confirm('确认关闭？')
          // eslint-disable-next-line no-unused-vars
          .then(_ => {
            done();
          })
          // eslint-disable-next-line no-unused-vars
          .catch(_ => {});
    },
    //在tab控件上单击的函数
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //切换照片和视频的函数
    switchVideo(doe){
      //doe=1,显示图片，doe=2，显示视频
      this.switchVideoUse=doe
    },
    //编辑作业指导书用到的
    editBook(doe,scope){
      //把用户选择的是那个操作传递出去
      this.editBookType=doe//1.用户选择的是修改作业指导书
      //把点击的数据传递出去，是scope格式的
      this.workBookScope=scope
      if (this.typeTableUse===1){
        //在换刀作业指导书中的操作
        if (this.editBookType===1){
          //是换刀作业指导书中的编辑操作
          this.titleUse='您正在编辑换刀作业指导书'
          this.inputText1=_.cloneDeep(this.workBookScope.row.work)
          this.inputText2=_.cloneDeep(this.workBookScope.row.problem)
          this.dialogVisibleText=true
        }
        else if (this.editBookType===2){
          //是要向下添加一条操作要领
          this.titleUse='您正在添加一条换刀作业指导书内容'
          this.inputText1=''
          this.inputText2=''
          this.dialogVisibleText=true
        }
        else if (this.editBookType===3){
          //是换刀作业指导书中的删除操作
          this.titleUse='您正在删除换刀作业指导书的本条内容，点击“确定”删除'
          this.inputText1=_.cloneDeep(this.workBookScope.row.work)
          this.inputText2=_.cloneDeep(this.workBookScope.row.problem)
          this.dialogVisibleText=true
        }
      }
      if (this.typeTableUse===2){
        //在换型作业指导书中的操作
        if (this.editBookType===1){
          //是换型作业指导书中的编辑操作
          this.titleUse='您正在编辑换刀作业指导书'
          this.inputText1=_.cloneDeep(this.workBookScope.row.work)
          this.inputText2=_.cloneDeep(this.workBookScope.row.problem)
          this.dialogVisibleText=true
        }
        else if (this.editBookType===2){
          //是要向下添加一条操作要领
          this.titleUse='您正在添加一条换刀作业指导书内容'
          this.inputText1=''
          this.inputText2=''
          this.dialogVisibleText=true
        }
        else if (this.editBookType===3){
          //是换型作业指导书中的删除操作
          this.titleUse='您正在删除换刀作业指导书的本条内容，点击“确定”删除'
          this.inputText1=_.cloneDeep(this.workBookScope.row.work)
          this.inputText2=_.cloneDeep(this.workBookScope.row.problem)
          this.dialogVisibleText=true
        }
      }
      if (this.typeTableUse===3){
        //在设备操作说明书中的操作
        if (this.editBookType===1){
          //是设备操作说明书中的编辑操作
          this.titleUse='您正在编辑换刀作业指导书'
          this.inputText1=_.cloneDeep(this.workBookScope.row.work)
          this.inputText2=_.cloneDeep(this.workBookScope.row.problem)
          this.dialogVisibleText=true
        }
        else if (this.editBookType===2){
          //是要向下添加一条操作要领
          this.titleUse='您正在添加一条换刀作业指导书内容'
          this.inputText1=''
          this.inputText2=''
          this.dialogVisibleText=true
        }
        else if (this.editBookType===3){
          //是设备操作说明书中的删除操作
          this.titleUse='您正在删除换刀作业指导书的本条内容，点击“确定”删除'
          this.inputText1=_.cloneDeep(this.workBookScope.row.work)
          this.inputText2=_.cloneDeep(this.workBookScope.row.problem)
          this.dialogVisibleText=true
        }
      }

    },
    //编辑作业指导书，弹出的窗体点击确定
    saveDataTextTwo(){
      if (this.typeTableUse===1){
        //是换刀作业指导书
        if (this.editBookType===1){
          //是换刀作业指导书中的编辑操作
          // 判断用户输入的数据是否为空,并组合新数据
          if (this.inputText1===''){
            this.inputText1='请编辑确认步骤'
          }
          if (this.inputText2===''){
            this.inputText2='请编辑失效模式'
          }
          //组合数据
          //向总数据中进行组合
          let temp=_.cloneDeep(this.workBook)
          temp[this.workBookScope.$index].work=this.inputText1
          temp[this.workBookScope.$index].problem=this.inputText2
          //组合成文本数据
          let strTemp=''
          //组合确认项目的数据
          for (let i = 0; i < temp.length; i++) {
            strTemp=strTemp+temp[i].work+'|%|'
          }
          //增加确认项目和失效分析间隔
          strTemp=strTemp+'|-|'
          //组合失效分析
          for (let i = 0; i < temp.length; i++) {
            strTemp=strTemp+temp[i].problem+'|%|'
          }
          strTemp=strTemp+'|-|'
          //向后端发动数据，进行保存
          this.$request.post('editChangeModelField',{
            id:this.tableDataScope.row.id,
            fieldName:'workBook',
            fieldVal:strTemp,
            fieldValOld:this.tableDataScope.row.editRecord,
            editUseName:this.useName
          })
              .then(result=>{
                if (result.code === 401) {
                  this.$router.push('UserLogin')
                  alert("您未登录，请登录")
                } else {
                  this.dialogVisibleText=false
                  //对新数据进行重新编辑
                  //把数据进行分割
                  const temp=result.data.split('|-|')
                  const tempWork=temp[0].split('|%|')
                  const tempProblem=temp[1].split('|%|')
                  //数据进行循环，并且进行组合
                  this.workBook=[]
                  if (tempWork.length===tempProblem.length){
                    for (let i = 0; i < tempWork.length-1; i++) {
                      let tempAll={
                        id:i,
                        work:tempWork[i],
                        problem:tempProblem[i],
                      }
                      this.workBook.push(tempAll)
                    }
                  }
                  else {
                    alert("程序出错，三不指导书的确认项目和失效分析不对应，请联系管理员")
                  }
                }
              })
        }
        else if (this.editBookType===2){
          //是换刀作业指导书中的向下增加一条作业内容
          // 判断用户输入的数据是否为空,并组合新数据
          if (this.inputText1===''){
            this.inputText1='请编辑确认步骤'
          }
          if (this.inputText2===''){
            this.inputText2='请编辑失效模式'
          }
          //向总数据中进行组合
          let temp=_.cloneDeep(this.workBook)
          temp.splice(this.workBookScope.$index+1,0,{id:0,
            work:this.inputText1,
            problem:this.inputText2})
          //组合成文本数据
          let strTemp=''
          //组合确认项目的数据
          for (let i = 0; i < temp.length; i++) {
            strTemp=strTemp+temp[i].work+'|%|'
          }
          //增加确认项目和失效分析间隔
          strTemp=strTemp+'|-|'
          //组合失效分析
          for (let i = 0; i < temp.length; i++) {
            strTemp=strTemp+temp[i].problem+'|%|'
          }
          strTemp=strTemp+'|-|'
          //向后端发动数据，进行保存
          this.$request.post('editChangeModelField',{
            id:this.tableDataScope.row.id,
            fieldName:'workBook',
            fieldVal:strTemp,
            fieldValOld:this.tableDataScope.row.editRecord,
            editUseName:this.useName
          })
              .then(result=>{
                if (result.code === 401) {
                  this.$router.push('UserLogin')
                  alert("您未登录，请登录")
                } else {
                  this.dialogVisibleText=false
                  //对新数据进行重新编辑
                  //把数据进行分割
                  const temp=result.data.split('|-|')
                  const tempWork=temp[0].split('|%|')
                  const tempProblem=temp[1].split('|%|')
                  //数据进行循环，并且进行组合
                  this.workBook=[]
                  if (tempWork.length===tempProblem.length){
                    for (let i = 0; i < tempWork.length-1; i++) {
                      let tempAll={
                        id:i,
                        work:tempWork[i],
                        problem:tempProblem[i],
                      }
                      this.workBook.push(tempAll)
                    }
                  }
                  else {
                    alert("程序出错，三不指导书的确认项目和失效分析不对应，请联系管理员")
                  }
                }
              })
        }
        else if (this.editBookType===3){
          //如果只有一条数据，不允许删除
          if (this.workBook.length===1){
            alert("只有一条数据，不允许删除")
            this.dialogVisibleText=false
            return
          }
          //向总数据中进行组合
          let temp=_.cloneDeep(this.workBook)
          temp.splice(this.workBookScope.$index,1)
          //组合成文本数据
          let strTemp=''
          //组合确认项目的数据
          for (let i = 0; i < temp.length; i++) {
            strTemp=strTemp+temp[i].work+'|%|'
          }
          //增加确认项目和失效分析间隔
          strTemp=strTemp+'|-|'
          //组合失效分析
          for (let i = 0; i < temp.length; i++) {
            strTemp=strTemp+temp[i].problem+'|%|'
          }
          strTemp=strTemp+'|-|'
          //向后端发动数据，进行保存
          this.$request.post('editChangeModelField',{
            id:this.tableDataScope.row.id,
            fieldName:'workBook',
            fieldVal:strTemp,
            fieldValOld:this.tableDataScope.row.editRecord,
            editUseName:this.useName
          })
              .then(result=>{
                if (result.code === 401) {
                  this.$router.push('UserLogin')
                  alert("您未登录，请登录")
                } else {
                  this.dialogVisibleText=false
                  //对新数据进行重新编辑
                  //把数据进行分割
                  const temp=result.data.split('|-|')
                  const tempWork=temp[0].split('|%|')
                  const tempProblem=temp[1].split('|%|')
                  //数据进行循环，并且进行组合
                  this.workBook=[]
                  if (tempWork.length===tempProblem.length){
                    for (let i = 0; i < tempWork.length-1; i++) {
                      let tempAll={
                        id:i,
                        work:tempWork[i],
                        problem:tempProblem[i],
                      }
                      this.workBook.push(tempAll)
                    }
                  }
                  else {
                    alert("程序出错，三不指导书的确认项目和失效分析不对应，请联系管理员")
                  }
                }
              })
        }
      }
      else if (this.typeTableUse===2){
        //是换型作业指导书
        if (this.editBookType===1){
          //是换型作业指导书中的编辑操作
          // 判断用户输入的数据是否为空,并组合新数据
          if (this.inputText1===''){
            this.inputText1='请编辑确认步骤'
          }
          if (this.inputText2===''){
            this.inputText2='请编辑失效模式'
          }
          //组合数据
          //向总数据中进行组合
          let temp=_.cloneDeep(this.workBook)
          temp[this.workBookScope.$index].work=this.inputText1
          temp[this.workBookScope.$index].problem=this.inputText2
          //组合成文本数据
          let strTemp=''
          //组合确认项目的数据
          for (let i = 0; i < temp.length; i++) {
            strTemp=strTemp+temp[i].work+'|%|'
          }
          //增加确认项目和失效分析间隔
          strTemp=strTemp+'|-|'
          //组合失效分析
          for (let i = 0; i < temp.length; i++) {
            strTemp=strTemp+temp[i].problem+'|%|'
          }
          strTemp=strTemp+'|-|'
          //向后端发动数据，进行保存
          this.$request.post('editChangeModelField',{
            id:this.tableDataScope.row.id,
            fieldName:'workBook',
            fieldVal:strTemp,
            fieldValOld:this.tableDataScope.row.editRecord,
            editUseName:this.useName
          })
              .then(result=>{
                if (result.code === 401) {
                  this.$router.push('UserLogin')
                  alert("您未登录，请登录")
                } else {
                  this.dialogVisibleText=false
                  //对新数据进行重新编辑
                  //把数据进行分割
                  const temp=result.data.split('|-|')
                  const tempWork=temp[0].split('|%|')
                  const tempProblem=temp[1].split('|%|')
                  //数据进行循环，并且进行组合
                  this.workBook=[]
                  if (tempWork.length===tempProblem.length){
                    for (let i = 0; i < tempWork.length-1; i++) {
                      let tempAll={
                        id:i,
                        work:tempWork[i],
                        problem:tempProblem[i],
                      }
                      this.workBook.push(tempAll)
                    }
                  }
                  else {
                    alert("程序出错，三不指导书的确认项目和失效分析不对应，请联系管理员")
                  }
                }
              })
        }
        else if (this.editBookType===2){
          //是换型作业指导书中的向下增加一条作业内容
          // 判断用户输入的数据是否为空,并组合新数据
          if (this.inputText1===''){
            this.inputText1='请编辑确认步骤'
          }
          if (this.inputText2===''){
            this.inputText2='请编辑失效模式'
          }
          //向总数据中进行组合
          let temp=_.cloneDeep(this.workBook)
          temp.splice(this.workBookScope.$index+1,0,{id:0,
            work:this.inputText1,
            problem:this.inputText2})
          //组合成文本数据
          let strTemp=''
          //组合确认项目的数据
          for (let i = 0; i < temp.length; i++) {
            strTemp=strTemp+temp[i].work+'|%|'
          }
          //增加确认项目和失效分析间隔
          strTemp=strTemp+'|-|'
          //组合失效分析
          for (let i = 0; i < temp.length; i++) {
            strTemp=strTemp+temp[i].problem+'|%|'
          }
          strTemp=strTemp+'|-|'
          //向后端发动数据，进行保存
          this.$request.post('editChangeModelField',{
            id:this.tableDataScope.row.id,
            fieldName:'workBook',
            fieldVal:strTemp,
            fieldValOld:this.tableDataScope.row.editRecord,
            editUseName:this.useName
          })
              .then(result=>{
                if (result.code === 401) {
                  this.$router.push('UserLogin')
                  alert("您未登录，请登录")
                } else {
                  this.dialogVisibleText=false
                  //对新数据进行重新编辑
                  //把数据进行分割
                  const temp=result.data.split('|-|')
                  const tempWork=temp[0].split('|%|')
                  const tempProblem=temp[1].split('|%|')
                  //数据进行循环，并且进行组合
                  this.workBook=[]
                  if (tempWork.length===tempProblem.length){
                    for (let i = 0; i < tempWork.length-1; i++) {
                      let tempAll={
                        id:i,
                        work:tempWork[i],
                        problem:tempProblem[i],
                      }
                      this.workBook.push(tempAll)
                    }
                  }
                  else {
                    alert("程序出错，三不指导书的确认项目和失效分析不对应，请联系管理员")
                  }
                }
              })
        }
        else if (this.editBookType===3){
          //如果只有一条数据，不允许删除
          if (this.workBook.length===1){
            alert("只有一条数据，不允许删除")
            this.dialogVisibleText=false
            return
          }
          //向总数据中进行组合
          let temp=_.cloneDeep(this.workBook)
          temp.splice(this.workBookScope.$index,1)
          //组合成文本数据
          let strTemp=''
          //组合确认项目的数据
          for (let i = 0; i < temp.length; i++) {
            strTemp=strTemp+temp[i].work+'|%|'
          }
          //增加确认项目和失效分析间隔
          strTemp=strTemp+'|-|'
          //组合失效分析
          for (let i = 0; i < temp.length; i++) {
            strTemp=strTemp+temp[i].problem+'|%|'
          }
          strTemp=strTemp+'|-|'
          //向后端发动数据，进行保存
          this.$request.post('editChangeModelField',{
            id:this.tableDataScope.row.id,
            fieldName:'workBook',
            fieldVal:strTemp,
            fieldValOld:this.tableDataScope.row.editRecord,
            editUseName:this.useName
          })
              .then(result=>{
                if (result.code === 401) {
                  this.$router.push('UserLogin')
                  alert("您未登录，请登录")
                } else {
                  this.dialogVisibleText=false
                  //对新数据进行重新编辑
                  //把数据进行分割
                  const temp=result.data.split('|-|')
                  const tempWork=temp[0].split('|%|')
                  const tempProblem=temp[1].split('|%|')
                  //数据进行循环，并且进行组合
                  this.workBook=[]
                  if (tempWork.length===tempProblem.length){
                    for (let i = 0; i < tempWork.length-1; i++) {
                      let tempAll={
                        id:i,
                        work:tempWork[i],
                        problem:tempProblem[i],
                      }
                      this.workBook.push(tempAll)
                    }
                  }
                  else {
                    alert("程序出错，三不指导书的确认项目和失效分析不对应，请联系管理员")
                  }
                }
              })
        }
      }
      else if (this.typeTableUse===3){
        //是设备操作说明书
        if (this.editBookType===1){
          //是设备操作说明书中的编辑操作
          // 判断用户输入的数据是否为空,并组合新数据
          if (this.inputText1===''){
            this.inputText1='请编辑确认步骤'
          }
          if (this.inputText2===''){
            this.inputText2='请编辑失效模式'
          }
          //组合数据
          //向总数据中进行组合
          let temp=_.cloneDeep(this.workBook)
          temp[this.workBookScope.$index].work=this.inputText1
          temp[this.workBookScope.$index].problem=this.inputText2
          //组合成文本数据
          let strTemp=''
          //组合确认项目的数据
          for (let i = 0; i < temp.length; i++) {
            strTemp=strTemp+temp[i].work+'|%|'
          }
          //增加确认项目和失效分析间隔
          strTemp=strTemp+'|-|'
          //组合失效分析
          for (let i = 0; i < temp.length; i++) {
            strTemp=strTemp+temp[i].problem+'|%|'
          }
          strTemp=strTemp+'|-|'
          //向后端发动数据，进行保存
          this.$request.post('editChangeModelField',{
            id:this.tableDataScope.row.id,
            fieldName:'workBook',
            fieldVal:strTemp,
            fieldValOld:this.tableDataScope.row.editRecord,
            editUseName:this.useName
          })
              .then(result=>{
                if (result.code === 401) {
                  this.$router.push('UserLogin')
                  alert("您未登录，请登录")
                } else {
                  this.dialogVisibleText=false
                  //对新数据进行重新编辑
                  //把数据进行分割
                  const temp=result.data.split('|-|')
                  const tempWork=temp[0].split('|%|')
                  const tempProblem=temp[1].split('|%|')
                  //数据进行循环，并且进行组合
                  this.workBook=[]
                  if (tempWork.length===tempProblem.length){
                    for (let i = 0; i < tempWork.length-1; i++) {
                      let tempAll={
                        id:i,
                        work:tempWork[i],
                        problem:tempProblem[i],
                      }
                      this.workBook.push(tempAll)
                    }
                  }
                  else {
                    alert("程序出错，三不指导书的确认项目和失效分析不对应，请联系管理员")
                  }
                }
              })
        }
        else if (this.editBookType===2){
          //是换型作业指导书中的向下增加一条作业内容
          // 判断用户输入的数据是否为空,并组合新数据
          if (this.inputText1===''){
            this.inputText1='请编辑确认步骤'
          }
          if (this.inputText2===''){
            this.inputText2='请编辑失效模式'
          }
          //向总数据中进行组合
          let temp=_.cloneDeep(this.workBook)
          temp.splice(this.workBookScope.$index+1,0,{id:0,
            work:this.inputText1,
            problem:this.inputText2})
          //组合成文本数据
          let strTemp=''
          //组合确认项目的数据
          for (let i = 0; i < temp.length; i++) {
            strTemp=strTemp+temp[i].work+'|%|'
          }
          //增加确认项目和失效分析间隔
          strTemp=strTemp+'|-|'
          //组合失效分析
          for (let i = 0; i < temp.length; i++) {
            strTemp=strTemp+temp[i].problem+'|%|'
          }
          strTemp=strTemp+'|-|'
          //向后端发动数据，进行保存
          this.$request.post('editChangeModelField',{
            id:this.tableDataScope.row.id,
            fieldName:'workBook',
            fieldVal:strTemp,
            fieldValOld:this.tableDataScope.row.editRecord,
            editUseName:this.useName
          })
              .then(result=>{
                if (result.code === 401) {
                  this.$router.push('UserLogin')
                  alert("您未登录，请登录")
                } else {
                  this.dialogVisibleText=false
                  //对新数据进行重新编辑
                  //把数据进行分割
                  const temp=result.data.split('|-|')
                  const tempWork=temp[0].split('|%|')
                  const tempProblem=temp[1].split('|%|')
                  //数据进行循环，并且进行组合
                  this.workBook=[]
                  if (tempWork.length===tempProblem.length){
                    for (let i = 0; i < tempWork.length-1; i++) {
                      let tempAll={
                        id:i,
                        work:tempWork[i],
                        problem:tempProblem[i],
                      }
                      this.workBook.push(tempAll)
                    }
                  }
                  else {
                    alert("程序出错，三不指导书的确认项目和失效分析不对应，请联系管理员")
                  }
                }
              })
        }
        else if (this.editBookType===3){
          //如果只有一条数据，不允许删除
          if (this.workBook.length===1){
            alert("只有一条数据，不允许删除")
            this.dialogVisibleText=false
            return
          }
          //向总数据中进行组合
          let temp=_.cloneDeep(this.workBook)
          temp.splice(this.workBookScope.$index,1)
          //组合成文本数据
          let strTemp=''
          //组合确认项目的数据
          for (let i = 0; i < temp.length; i++) {
            strTemp=strTemp+temp[i].work+'|%|'
          }
          //增加确认项目和失效分析间隔
          strTemp=strTemp+'|-|'
          //组合失效分析
          for (let i = 0; i < temp.length; i++) {
            strTemp=strTemp+temp[i].problem+'|%|'
          }
          strTemp=strTemp+'|-|'
          //向后端发动数据，进行保存
          this.$request.post('editChangeModelField',{
            id:this.tableDataScope.row.id,
            fieldName:'workBook',
            fieldVal:strTemp,
            fieldValOld:this.tableDataScope.row.editRecord,
            editUseName:this.useName
          })
              .then(result=>{
                if (result.code === 401) {
                  this.$router.push('UserLogin')
                  alert("您未登录，请登录")
                } else {
                  this.dialogVisibleText=false
                  //对新数据进行重新编辑
                  //把数据进行分割
                  const temp=result.data.split('|-|')
                  const tempWork=temp[0].split('|%|')
                  const tempProblem=temp[1].split('|%|')
                  //数据进行循环，并且进行组合
                  this.workBook=[]
                  if (tempWork.length===tempProblem.length){
                    for (let i = 0; i < tempWork.length-1; i++) {
                      let tempAll={
                        id:i,
                        work:tempWork[i],
                        problem:tempProblem[i],
                      }
                      this.workBook.push(tempAll)
                    }
                  }
                  else {
                    alert("程序出错，三不指导书的确认项目和失效分析不对应，请联系管理员")
                  }
                }
              })
        }
      }
    },
    //编辑表头的函数，有：1：增加；2：修改；3：删除
    editTable(doe){
      if (this.typeTableUse===0){
        alert("请先选择作业指导书类型")
      }
      else if (this.typeTableUse===1){
        //做的是刀具的作业指导书,
        //把用户选择的是编辑/添加/删除  中的哪一项传递出去
        this.editTableUse=doe
        if (doe===1){
          //是插入操作，组合数据
          this.formTableData={
            //id主键
            id:'',
            //车间名称
            workshop:'',
            //线体名称
            lineName:'',
            //工序名称
            op:'',
            //文件名称
            fileName:'',
            // 版本号
            editionNum:'',
            //编制日期
            writeDate:'',
            //执行日期
            executeDate:'',
            //文件编号
            fileNum:'',
            //编制
            writeUse:'',
            //审核
            examineUse:'',
            //批准
            ratifyUse:'',
            //会签
            countersignUse:'',
            //作业指导书
            workBook:'',
            //图片附件
            BookImage:'',
            // 视频附件
            BookVideo:'',
            // 修改记录
            editRecord:'',
            //指导书类型
            bookType:'换刀作业',
          }
          this.titleUse='您正在插入一行《换刀作业指导书》'
          this.dialogTableHeader=true
        }
        else if (doe===2){
          if (this.workBook.length===0){
            alert("请选择一个指导书进行修改")
          }
          else {
            //是编辑工作，涉及到一个赋值，需要深度拷贝
            this.formTableData=_.cloneDeep(this.tableDataTemp)
            this.titleUse='您正在修改一行《换刀作业指导书》'
            //打开弹窗
            this.dialogTableHeader=true
          }
        }
        else if (doe===3){
          if (this.workBook.length===0){
            alert("请选择一个指导书进行修改")
          }
          else {
            //是删除，涉及到一个赋值，需要深度拷贝
            this.formTableData=_.cloneDeep(this.tableDataTemp)
            this.titleUse='您正在删除一行《换刀作业指导书》'
            //打开弹窗
            this.dialogTableHeader=true
          }
        }
      }
      else if (this.typeTableUse===2){
        //做的是换型作业指导书,
        //把用户选择的是编辑/添加/删除  中的哪一项传递出去
        this.editTableUse=doe
        if (doe===1){
          //是插入操作，组合数据
          this.formTableData={
            //id主键
            id:'',
            //车间名称
            workshop:'',
            //线体名称
            lineName:'',
            //工序名称
            op:'',
            //文件名称
            fileName:'',
            // 版本号
            editionNum:'',
            //编制日期
            writeDate:'',
            //执行日期
            executeDate:'',
            //文件编号
            fileNum:'',
            //编制
            writeUse:'',
            //审核
            examineUse:'',
            //批准
            ratifyUse:'',
            //会签
            countersignUse:'',
            //作业指导书
            workBook:'',
            //图片附件
            BookImage:'',
            // 视频附件
            BookVideo:'',
            // 修改记录
            editRecord:'',
            //指导书类型
            bookType:'换型作业',
          }
          this.titleUse='您正在插入一行《换型作业指导书》'
          this.dialogTableHeader=true
        }
        else if (doe===2){
          if (this.workBook.length===0){
            alert("请选择一个指导书进行修改")
          }
          else {
            //是编辑工作，涉及到一个赋值，需要深度拷贝
            this.formTableData=_.cloneDeep(this.tableDataTemp)
            this.titleUse='您正在修改一行《换型作业指导书》'
            //打开弹窗
            this.dialogTableHeader=true
          }
        }
        else if (doe===3){
          if (this.workBook.length===0){
            alert("请选择一个指导书进行修改")
          }
          else {
            //是删除，涉及到一个赋值，需要深度拷贝
            this.formTableData=_.cloneDeep(this.tableDataTemp)
            this.titleUse='您正在删除一行《换型作业指导书》'
            //打开弹窗
            this.dialogTableHeader=true
          }
        }
      }
      else if (this.typeTableUse===3){
        //做的是设备操作说明书,
        //把用户选择的是编辑/添加/删除  中的哪一项传递出去
        this.editTableUse=doe
        if (doe===1){
          //是插入操作，组合数据
          this.formTableData={
            //id主键
            id:'',
            //车间名称
            workshop:'',
            //线体名称
            lineName:'',
            //工序名称
            op:'',
            //文件名称
            fileName:'',
            // 版本号
            editionNum:'',
            //编制日期
            writeDate:'',
            //执行日期
            executeDate:'',
            //文件编号
            fileNum:'',
            //编制
            writeUse:'',
            //审核
            examineUse:'',
            //批准
            ratifyUse:'',
            //会签
            countersignUse:'',
            //作业指导书
            workBook:'',
            //图片附件
            BookImage:'',
            // 视频附件
            BookVideo:'',
            // 修改记录
            editRecord:'',
            //指导书类型
            bookType:'设备操作说明书',
          }
          this.titleUse='您正在插入一行《设备操作说明书》'
          this.dialogTableHeader=true
        }
        else if (doe===2){
          if (this.workBook.length===0){
            alert("请选择一个指导书进行修改")
          }
          else {
            //是编辑工作，涉及到一个赋值，需要深度拷贝
            this.formTableData=_.cloneDeep(this.tableDataTemp)
            this.titleUse='您正在修改一行《设备操作说明书》'
            //打开弹窗
            this.dialogTableHeader=true
          }
        }
        else if (doe===3){
          if (this.workBook.length===0){
            alert("请选择一个指导书进行修改")
          }
          else {
            //是删除，涉及到一个赋值，需要深度拷贝
            this.formTableData=_.cloneDeep(this.tableDataTemp)
            this.titleUse='您正在删除一行《设备操作说明书》'
            //打开弹窗
            this.dialogTableHeader=true
          }
        }
      }

    },
    //选择器的变化引起的函数
    selectChange(val, doe){
      if (val==='机加车间/Machining workshop/Машиностроительный цех'){
        this.optionLine=machiningAssembly
        this.disabledLineName=false
      }
      else if (val==='装配车间/Assembly workshop/Сборочная линия'){
        this.optionLine=workshopAssembly
        this.disabledLineName=false
      }
      console.log(doe)
    },
    //表头弹窗中的确认的弹窗
    onSubmit(doe,formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.typeTableUse===1){
            //现在是对刀具作业指导书进行添加/修改/删除,doe接收的是用户现在了操作类型：1.插入；2.编辑；3.删除
            if (doe===1){
              //现在是新建一个指导书
              /*组合数据*/
              //组合相关人员的标记
              this.formTableData.ratifyUse=this.formTableData.ratifyUse+'/指定'
              this.formTableData.examineUse=this.formTableData.examineUse+'/指定'
              this.formTableData.countersignUse=this.formTableData.countersignUse+'/指定'
              //组合两个时间的数据，编制时间，执行时间
              let date=new Date(this.formTableData.writeDate)
              let year = date.getFullYear().toString().padStart(4, '0');
              let month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以需要+1
              let day = date.getDate().toString().padStart(2, '0');
              this.formTableData.writeDate=`${year}-${month}-${day}`

              date=new  Date(this.formTableData.executeDate)
              year = date.getFullYear().toString().padStart(4, '0');
              month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以需要+1
              day = date.getDate().toString().padStart(2, '0');
              this.formTableData.executeDate=`${year}-${month}-${day}`

              //固定版本号，限定为1
              this.formTableData.editionNum=1
              //组合编制人
              this.formTableData.writeUse=this.useName
              //组合删除标记位
              this.formTableData.deleteSign=1

              //组合作业指导书的内容
              this.formTableData.workBook='请编辑内容|*|Please edit the content|*|Пожалуйста, отредактируйте содержимое|%||-|请编辑内容|*|Please edit the content|*|Пожалуйста, отредактируйте содержимое|%||-|'

              //向后端发送请求，插入数据
              this.$request.post('insertChangeModel',this.formTableData).then(result=>{
                if (result.code === 401) {
                  this.$router.push('UserLogin')
                  alert("您未登录，请登录")
                } else {
                  alert("插入成功")
                  //进行数据赋值
                  this.tableData.push(this.formTableData)
                  this.tableDataTemp=_.cloneDeep(this.formTableData)


                  this.dialogTableHeader=false
                }
              })
            }
            else if (doe===2){
              //是编辑操作
              /*组合数据*/
              //组合相关人员的标记,重新设定编审批的内容
              this.formTableData.ratifyUse=this.formTableData.ratifyUse.replace(/\/指定/g,'')
              this.formTableData.examineUse=this.formTableData.examineUse.replace(/\/指定/g,'')
              this.formTableData.countersignUse=this.formTableData.countersignUse.replace(/\/指定/g,'')
              this.formTableData.ratifyUse=this.formTableData.ratifyUse+'/指定'
              this.formTableData.examineUse=this.formTableData.examineUse+'/指定'
              this.formTableData.countersignUse=this.formTableData.countersignUse+'/指定'
              //组合两个时间的数据，编制时间，执行时间
              let date=new Date(this.formTableData.writeDate)
              let year = date.getFullYear().toString().padStart(4, '0');
              let month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以需要+1
              let day = date.getDate().toString().padStart(2, '0');
              this.formTableData.writeDate=`${year}-${month}-${day}`

              date=new  Date(this.formTableData.executeDate)
              year = date.getFullYear().toString().padStart(4, '0');
              month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以需要+1
              day = date.getDate().toString().padStart(2, '0');
              this.formTableData.executeDate=`${year}-${month}-${day}`

              //固定版本号，限定为1
              this.formTableData.editionNum=1
              //组合编制人
              this.formTableData.writeUse=this.useName

              this.$request.post('/editChangeModelTable',this.formTableData).then(result=>{
                if (result.code === 401) {
                  this.$router.push('UserLogin')
                  alert("您未登录，请登录")
                } else {
                  //数据赋值
                  //进行数据赋值
                  this.tableData[this.tableDataScope.$index]=this.formTableData
                  this.tableDataTemp=_.cloneDeep(this.formTableData)
                  this.dialogTableHeader=false;
                  alert("修改成功")
                }
              })
            }
            else if (doe===3){
              //是删除操作，用修改一个字段的形式实现，但是这个是根据id修改一个int类型的。
              this.$request.post('editChangeModelFieldInt',{
                id:this.tableDataScope.row.id,
                fieldName:'deleteSign',
                fieldVal:0,
              }).then(result=>{
                if (result.code === 401) {
                  this.$router.push('UserLogin')
                  alert("您未登录，请登录")
                } else {
                  //组合数据
                  //删除大表中的内容
                  this.tableData.splice(this.tableDataScope.$index,1);
                  this.tableDataTemp={
                    //id主键
                    id:'',
                    //车间名称
                    workshop:'',
                    //线体名称
                    lineName:'',
                    //工序名称
                    op:'',
                    //文件名称
                    fileName:'',
                    // 版本号
                    editionNum:'',
                    //编制日期
                    writeDate:'',
                    //执行日期
                    executeDate:'',
                    //文件编号
                    fileNum:'',
                    //编制
                    writeUse:'',
                    //审核
                    examineUse:'',
                    //批准
                    ratifyUse:'',
                    //会签
                    countersignUse:'',
                    //作业指导书
                    workBook:'',
                    //图片附件
                    BookImage:'',
                    // 视频附件
                    BookVideo:'',
                    // 修改记录
                    editRecord:'',
                    //指导书类型
                    bookType:'',
                    //删除标记位
                    deleteSign:'',
                    //创建时间
                    establishTime:'',
                    //修改时间
                    UpdateTime:'',
                  }
                  this.workBook=[]
                  this.tableDataScope=null
                  this.dialogTableHeader=false
                }
              })
            }
          }
          else if (this.typeTableUse===2){
            //现在是对刀具作业指导书进行添加/修改/删除,doe接收的是用户现在了操作类型：1.插入；2.编辑；3.删除
            if (doe===1){
              //现在是新建一个指导书
              /*组合数据*/
              //组合相关人员的标记
              this.formTableData.ratifyUse=this.formTableData.ratifyUse+'/指定'
              this.formTableData.examineUse=this.formTableData.examineUse+'/指定'
              this.formTableData.countersignUse=this.formTableData.countersignUse+'/指定'
              //组合两个时间的数据，编制时间，执行时间
              let date=new Date(this.formTableData.writeDate)
              let year = date.getFullYear().toString().padStart(4, '0');
              let month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以需要+1
              let day = date.getDate().toString().padStart(2, '0');
              this.formTableData.writeDate=`${year}-${month}-${day}`

              date=new  Date(this.formTableData.executeDate)
              year = date.getFullYear().toString().padStart(4, '0');
              month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以需要+1
              day = date.getDate().toString().padStart(2, '0');
              this.formTableData.executeDate=`${year}-${month}-${day}`

              //固定版本号，限定为1
              this.formTableData.editionNum=1
              //组合编制人
              this.formTableData.writeUse=this.useName
              //组合删除标记位
              this.formTableData.deleteSign=1

              //组合作业指导书的内容
              this.formTableData.workBook='请编辑内容|*|Please edit the content|*|Пожалуйста, отредактируйте содержимое|%||-|请编辑内容|*|Please edit the content|*|Пожалуйста, отредактируйте содержимое|%||-|'

              //向后端发送请求，插入数据
              this.$request.post('insertChangeModel',this.formTableData).then(result=>{
                if (result.code === 401) {
                  this.$router.push('UserLogin')
                  alert("您未登录，请登录")
                } else {
                  alert("插入成功")
                  //进行数据赋值
                  this.tableData.push(this.formTableData)
                  this.tableDataTemp=_.cloneDeep(this.formTableData)
                  this.dialogTableHeader=false
                }
              })
            }
            else if (doe===2){
              /*组合数据*/
              //组合相关人员的标记,重新设定编审批的内容
              this.formTableData.ratifyUse=this.formTableData.ratifyUse.replace(/\/指定/g,'')
              this.formTableData.examineUse=this.formTableData.examineUse.replace(/\/指定/g,'')
              this.formTableData.countersignUse=this.formTableData.countersignUse.replace(/\/指定/g,'')
              this.formTableData.ratifyUse=this.formTableData.ratifyUse+'/指定'
              this.formTableData.examineUse=this.formTableData.examineUse+'/指定'
              this.formTableData.countersignUse=this.formTableData.countersignUse+'/指定'
              //组合两个时间的数据，编制时间，执行时间
              let date=new Date(this.formTableData.writeDate)
              let year = date.getFullYear().toString().padStart(4, '0');
              let month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以需要+1
              let day = date.getDate().toString().padStart(2, '0');
              this.formTableData.writeDate=`${year}-${month}-${day}`

              date=new  Date(this.formTableData.executeDate)
              year = date.getFullYear().toString().padStart(4, '0');
              month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以需要+1
              day = date.getDate().toString().padStart(2, '0');
              this.formTableData.executeDate=`${year}-${month}-${day}`
              //固定版本号，限定为1
              this.formTableData.editionNum=1
              //组合编制人
              this.formTableData.writeUse=this.useName
              this.$request.post('/editChangeModelTable',this.formTableData).then(result=>{
                if (result.code === 401) {
                  this.$router.push('UserLogin')
                  alert("您未登录，请登录")
                } else {
                  //数据赋值
                  //进行数据赋值
                  this.tableData[this.tableDataScope.$index]=this.formTableData
                  this.tableDataTemp=_.cloneDeep(this.formTableData)
                  this.dialogTableHeader=false;
                  alert("修改成功")
                }
              })
            }
            else if (doe===3){
              //是删除操作，用修改一个字段的形式实现，但是这个是根据id修改一个int类型的。
              this.$request.post('editChangeModelFieldInt',{
                id:this.tableDataScope.row.id,
                fieldName:'deleteSign',
                fieldVal:0,
              }).then(result=>{
                if (result.code === 401) {
                  this.$router.push('UserLogin')
                  alert("您未登录，请登录")
                } else {
                  //组合数据
                  //删除大表中的内容
                  this.tableData.splice(this.tableDataScope.$index,1);
                  this.tableDataTemp={
                    //id主键
                    id:'',
                    //车间名称
                    workshop:'',
                    //线体名称
                    lineName:'',
                    //工序名称
                    op:'',
                    //文件名称
                    fileName:'',
                    // 版本号
                    editionNum:'',
                    //编制日期
                    writeDate:'',
                    //执行日期
                    executeDate:'',
                    //文件编号
                    fileNum:'',
                    //编制
                    writeUse:'',
                    //审核
                    examineUse:'',
                    //批准
                    ratifyUse:'',
                    //会签
                    countersignUse:'',
                    //作业指导书
                    workBook:'',
                    //图片附件
                    BookImage:'',
                    // 视频附件
                    BookVideo:'',
                    // 修改记录
                    editRecord:'',
                    //指导书类型
                    bookType:'',
                    //删除标记位
                    deleteSign:'',
                    //创建时间
                    establishTime:'',
                    //修改时间
                    UpdateTime:'',
                  }
                  this.workBook=[]
                  this.tableDataScope=null
                  this.dialogTableHeader=false
                }
              })
            }
          }
          else if (this.typeTableUse===3){
            //现在是对刀具作业指导书进行添加/修改/删除,doe接收的是用户现在了操作类型：1.插入；2.编辑；3.删除
            if (doe===1){
              //现在是新建一个指导书
              /*组合数据*/
              //组合相关人员的标记
              this.formTableData.ratifyUse=this.formTableData.ratifyUse+'/指定'
              this.formTableData.examineUse=this.formTableData.examineUse+'/指定'
              this.formTableData.countersignUse=this.formTableData.countersignUse+'/指定'
              //组合两个时间的数据，编制时间，执行时间
              let date=new Date(this.formTableData.writeDate)
              let year = date.getFullYear().toString().padStart(4, '0');
              let month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以需要+1
              let day = date.getDate().toString().padStart(2, '0');
              this.formTableData.writeDate=`${year}-${month}-${day}`

              date=new  Date(this.formTableData.executeDate)
              year = date.getFullYear().toString().padStart(4, '0');
              month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以需要+1
              day = date.getDate().toString().padStart(2, '0');
              this.formTableData.executeDate=`${year}-${month}-${day}`

              //固定版本号，限定为1
              this.formTableData.editionNum=1
              //组合编制人
              this.formTableData.writeUse=this.useName
              //组合删除标记位
              this.formTableData.deleteSign=1

              //组合作业指导书的内容
              this.formTableData.workBook='请编辑内容|*|Please edit the content|*|Пожалуйста, отредактируйте содержимое|%||-|请编辑内容|*|Please edit the content|*|Пожалуйста, отредактируйте содержимое|%||-|'

              //向后端发送请求，插入数据
              this.$request.post('insertChangeModel',this.formTableData).then(result=>{
                if (result.code === 401) {
                  this.$router.push('UserLogin')
                  alert("您未登录，请登录")
                } else {
                  alert("插入成功")
                  //进行数据赋值
                  this.tableData.push(this.formTableData)
                  this.tableDataTemp=_.cloneDeep(this.formTableData)
                  this.dialogTableHeader=false
                }
              })
            }
            else if (doe===2){
              /*组合数据*/
              //组合相关人员的标记,重新设定编审批的内容
              this.formTableData.ratifyUse=this.formTableData.ratifyUse.replace(/\/指定/g,'')
              this.formTableData.examineUse=this.formTableData.examineUse.replace(/\/指定/g,'')
              this.formTableData.countersignUse=this.formTableData.countersignUse.replace(/\/指定/g,'')
              this.formTableData.ratifyUse=this.formTableData.ratifyUse+'/指定'
              this.formTableData.examineUse=this.formTableData.examineUse+'/指定'
              this.formTableData.countersignUse=this.formTableData.countersignUse+'/指定'
              //组合两个时间的数据，编制时间，执行时间
              let date=new Date(this.formTableData.writeDate)
              let year = date.getFullYear().toString().padStart(4, '0');
              let month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以需要+1
              let day = date.getDate().toString().padStart(2, '0');
              this.formTableData.writeDate=`${year}-${month}-${day}`

              date=new  Date(this.formTableData.executeDate)
              year = date.getFullYear().toString().padStart(4, '0');
              month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以需要+1
              day = date.getDate().toString().padStart(2, '0');
              this.formTableData.executeDate=`${year}-${month}-${day}`
              //固定版本号，限定为1
              this.formTableData.editionNum=1
              //组合编制人
              this.formTableData.writeUse=this.useName
              this.$request.post('/editChangeModelTable',this.formTableData).then(result=>{
                if (result.code === 401) {
                  this.$router.push('UserLogin')
                  alert("您未登录，请登录")
                } else {
                  //数据赋值
                  //进行数据赋值
                  this.tableData[this.tableDataScope.$index]=this.formTableData
                  this.tableDataTemp=_.cloneDeep(this.formTableData)
                  this.dialogTableHeader=false;
                  alert("修改成功")
                }
              })
            }
            else if (doe===3){
              //是删除操作，用修改一个字段的形式实现，但是这个是根据id修改一个int类型的。
              this.$request.post('editChangeModelFieldInt',{
                id:this.tableDataScope.row.id,
                fieldName:'deleteSign',
                fieldVal:0,
              }).then(result=>{
                if (result.code === 401) {
                  this.$router.push('UserLogin')
                  alert("您未登录，请登录")
                } else {
                  //组合数据
                  //删除大表中的内容
                  this.tableData.splice(this.tableDataScope.$index,1);
                  this.tableDataTemp={
                    //id主键
                    id:'',
                    //车间名称
                    workshop:'',
                    //线体名称
                    lineName:'',
                    //工序名称
                    op:'',
                    //文件名称
                    fileName:'',
                    // 版本号
                    editionNum:'',
                    //编制日期
                    writeDate:'',
                    //执行日期
                    executeDate:'',
                    //文件编号
                    fileNum:'',
                    //编制
                    writeUse:'',
                    //审核
                    examineUse:'',
                    //批准
                    ratifyUse:'',
                    //会签
                    countersignUse:'',
                    //作业指导书
                    workBook:'',
                    //图片附件
                    BookImage:'',
                    // 视频附件
                    BookVideo:'',
                    // 修改记录
                    editRecord:'',
                    //指导书类型
                    bookType:'',
                    //删除标记位
                    deleteSign:'',
                    //创建时间
                    establishTime:'',
                    //修改时间
                    UpdateTime:'',
                  }
                  this.workBook=[]
                  this.tableDataScope=null
                  this.dialogTableHeader=false
                }
              })
            }
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //关于图片的编辑，并且弹窗。
    editVideoAndImage(doe){
      this.editVideoAndImageUse=doe
      if (this.typeTableUse===0){
        alert("请先选择作业指导书类型")
        return
      }
      if (this.typeTableUse===1){
        //是换刀中的操作
        if (this.editVideoAndImageUse===1){
          //是要插入图片
          //组合照片的数据
          this.PictureList = []
          if (this.tableDataScope.row.bookImage.includes('|*|')){
            const temp1 = this.tableDataScope.row.bookImage.split('|*|')
            for (let i = 0; i < temp1.length - 1; i++) {
              let temp2 = {
                name: temp1[i],
                percentage: 0,
                raw: File,
                size: 0,
                status: null,
                uid: null,
                url: filepath + temp1[i]
              }
              this.PictureList.push(temp2)
            }
          }
          //打开窗口
          this.dialogPicture=true
        }
        else if (this.editVideoAndImageUse===2){
          //组合照片的数据(是视频数据）
          this.PictureList = []
          if (this.tableDataScope.row.bookVideo.includes('|*|')){
            const temp1 = this.tableDataScope.row.bookVideo.split('|*|')
            for (let i = 0; i < temp1.length - 1; i++) {
              let temp2 = {
                name: temp1[i],
                percentage: 0,
                raw: File,
                size: 0,
                status: null,
                uid: null,
                url: filepath + temp1[i]
              }
              this.PictureList.push(temp2)
            }
          }
          //打开窗口
          this.dialogPicture=true
        }
      }
      else if (this.typeTableUse===2){
        //是换型中的操作
        if (this.editVideoAndImageUse===1){
          //是要插入图片
          //组合照片的数据
          this.PictureList = []
          if (this.tableDataScope.row.bookImage.includes('|*|')){
            const temp1 = this.tableDataScope.row.bookImage.split('|*|')
            for (let i = 0; i < temp1.length - 1; i++) {
              let temp2 = {
                name: temp1[i],
                percentage: 0,
                raw: File,
                size: 0,
                status: null,
                uid: null,
                url: filepath + temp1[i]
              }
              this.PictureList.push(temp2)
            }
          }
          //打开窗口
          this.dialogPicture=true
        }
        else if (this.editVideoAndImageUse===2){
          //组合照片的数据(是视频数据）
          this.PictureList = []
          if (this.tableDataScope.row.bookVideo.includes('|*|')){
            const temp1 = this.tableDataScope.row.bookVideo.split('|*|')
            for (let i = 0; i < temp1.length - 1; i++) {
              let temp2 = {
                name: temp1[i],
                percentage: 0,
                raw: File,
                size: 0,
                status: null,
                uid: null,
                url: filepath + temp1[i]
              }
              this.PictureList.push(temp2)
            }
          }
          //打开窗口
          this.dialogPicture=true
        }
      }
      else if (this.typeTableUse===3){
        //是设备操作说明书中的操作
        if (this.editVideoAndImageUse===1){
          //是要插入图片
          //组合照片的数据
          this.PictureList = []
          if (this.tableDataScope.row.bookImage.includes('|*|')){
            const temp1 = this.tableDataScope.row.bookImage.split('|*|')
            for (let i = 0; i < temp1.length - 1; i++) {
              let temp2 = {
                name: temp1[i],
                percentage: 0,
                raw: File,
                size: 0,
                status: null,
                uid: null,
                url: filepath + temp1[i]
              }
              this.PictureList.push(temp2)
            }
          }
          //打开窗口
          this.dialogPicture=true
        }
        else if (this.editVideoAndImageUse===2){
          //组合照片的数据(是视频数据）
          this.PictureList = []
          if (this.tableDataScope.row.bookVideo.includes('|*|')){
            const temp1 = this.tableDataScope.row.bookVideo.split('|*|')
            for (let i = 0; i < temp1.length - 1; i++) {
              let temp2 = {
                name: temp1[i],
                percentage: 0,
                raw: File,
                size: 0,
                status: null,
                uid: null,
                url: filepath + temp1[i]
              }
              this.PictureList.push(temp2)
            }
          }
          //打开窗口
          this.dialogPicture=true
        }
      }
    },
    //上传文件的函数(上传图片）
    saveFileAnnex(file, fileList){
      console.log(fileList)
      if (this.typeTableUse===1){
        //是在换刀作业指导书中的操作
        //把图片加入到自己的图片列表中，好像没有用
        this.PictureList.push(file)

        const formData = new FormData()
        //把文件数据放进去
        formData.append('file', file.raw)
        //把原来的图片字符串放进去，作为修改用
        formData.append('id',this.tableDataScope.row.id)
        formData.append('fieldName','BookImage')
        formData.append('fieldVal',this.tableDataScope.row.bookImage)

        //保存文件，需要返回修改后的图片地址保存数据，并并且进行赋值
        this.$requestFile.post('/editChangeModelPicture',formData).
        then(result=>{
          if (result.code === 401) {
            this.$router.push('UserLogin')
            alert("您未登录，请登录")
          }else {
            if (result.data===null){
              alert("程序出现异常，请联系管理员")
            }else {
              //修改列表中的数据
              console.log(result.data)
              //修改主表中的数据和记录的保存数据
              this.tableData[this.tableDataScope.$index].bookImage=result.data
              this.tableDataScope.row.bookImage=result.data
              //修改走马灯的图片数组
              //组合照片的数据
              this.PictureList=[]//组合文件上传窗口的图片列表
              this.itemView=[]//修改走马灯的图片数组
              const temp1=result.data.split('|*|')
              for (let i = 0; i < temp1.length-1; i++) {
                let temp2 = {
                  name: temp1[i],
                  percentage: 0,
                  raw: File,
                  size: 0,
                  status: null,
                  uid: null,
                  url: filepath + temp1[i]
                }
                this.PictureList.push(temp2)
                this.itemView.push(filepath+temp1[i])
              }
            }
          }
        })
      }
      else if (this.typeTableUse===2){
        //是在换刀作业指导书中的操作
        //把图片加入到自己的图片列表中，好像没有用
        this.PictureList.push(file)

        const formData = new FormData()
        //把文件数据放进去
        formData.append('file', file.raw)
        //把原来的图片字符串放进去，作为修改用
        formData.append('id',this.tableDataScope.row.id)
        formData.append('fieldName','BookImage')
        formData.append('fieldVal',this.tableDataScope.row.bookImage)

        //保存文件，需要返回修改后的图片地址保存数据，并并且进行赋值
        this.$requestFile.post('/editChangeModelPicture',formData).
        then(result=>{
          if (result.code === 401) {
            this.$router.push('UserLogin')
            alert("您未登录，请登录")
          }else {
            if (result.data===null){
              alert("程序出现异常，请联系管理员")
            }else {
              //修改列表中的数据
              console.log(result.data)
              //修改主表中的数据和记录的保存数据
              this.tableData[this.tableDataScope.$index].bookImage=result.data
              this.tableDataScope.row.bookImage=result.data
              //修改走马灯的图片数组
              //组合照片的数据
              this.PictureList=[]//组合文件上传窗口的图片列表
              this.itemView=[]//修改走马灯的图片数组
              const temp1=result.data.split('|*|')
              for (let i = 0; i < temp1.length-1; i++) {
                let temp2 = {
                  name: temp1[i],
                  percentage: 0,
                  raw: File,
                  size: 0,
                  status: null,
                  uid: null,
                  url: filepath + temp1[i]
                }
                this.PictureList.push(temp2)
                this.itemView.push(filepath+temp1[i])
              }
            }
          }
        })
      }
      else if (this.typeTableUse===3){
        //是在设备操作说明书中的操作
        //把图片加入到自己的图片列表中，好像没有用
        this.PictureList.push(file)

        const formData = new FormData()
        //把文件数据放进去
        formData.append('file', file.raw)
        //把原来的图片字符串放进去，作为修改用
        formData.append('id',this.tableDataScope.row.id)
        formData.append('fieldName','BookImage')
        formData.append('fieldVal',this.tableDataScope.row.bookImage)

        //保存文件，需要返回修改后的图片地址保存数据，并并且进行赋值
        this.$requestFile.post('/editChangeModelPicture',formData).
        then(result=>{
          if (result.code === 401) {
            this.$router.push('UserLogin')
            alert("您未登录，请登录")
          }else {
            if (result.data===null){
              alert("程序出现异常，请联系管理员")
            }else {
              //修改列表中的数据
              console.log(result.data)
              //修改主表中的数据和记录的保存数据
              this.tableData[this.tableDataScope.$index].bookImage=result.data
              this.tableDataScope.row.bookImage=result.data
              //修改走马灯的图片数组
              //组合照片的数据
              this.PictureList=[]//组合文件上传窗口的图片列表
              this.itemView=[]//修改走马灯的图片数组
              const temp1=result.data.split('|*|')
              for (let i = 0; i < temp1.length-1; i++) {
                let temp2 = {
                  name: temp1[i],
                  percentage: 0,
                  raw: File,
                  size: 0,
                  status: null,
                  uid: null,
                  url: filepath + temp1[i]
                }
                this.PictureList.push(temp2)
                this.itemView.push(filepath+temp1[i])
              }
            }
          }
        })
      }
    },
    //点击查看照片的函数
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogPictureAnnex = true;
    },
    //点击图片下载按钮
    handleDownload(file) {
      //向后端发送请求，下载文件
      this.$request.get('/changeModelDownload?fileName=' + encodeURIComponent(file.name)).then(result=>{
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        }
        else {
          let base64Data = 'data:application/octet-stream;base64,' + result.data//
          // 创建一个Blob对象
          let blob = this.dataURItoBlob(base64Data);
          // 触发下载
          this.downloadBlob(blob, file.name);
        }
      }).catch(error => {
        // 处理请求错误
        console.error("请求出错", error);
      })
    },
    //照片移除的函数
    handleRemove(file) {
      //判断用户是要删除哪里的图片
      if (this.typeTableUse===1){
        //是换刀作业的作业指导书的图片
        if (this.editVideoAndImageUse===1){
          //是换刀中的作业指导书的图片
          //对图片列表中的信息进行整合
          const index = this.PictureList.findIndex(item => item.name === file.name);
          this.PictureList.splice(index,1)
          //发送请求，执行删除文件，发送的是这一行的id，记录图片地址的字符串，以及需要修改的字段，为了减少后端的写的代码，重新返回新的文件名的序列内容，并且更新。
          //组合数据，首先得到删除文件后的数据。
          console.log(file.name)
          let temp = this.tableDataScope.row.bookImage.replace(file.name+'|*|','')
          this.$request.post('/changeModelPictureRemove',{
            id:this.tableDataScope.row.id,
            fieldName:'bookImage',
            filedVal:temp,
            pictureName:file.name
          }).
          then(result=>{
            if (result.code === 401) {
              this.$router.push('UserLogin')
              alert("您未登录，请登录")
            }
            else {
              if (result.data==='删除文件时出错'){
                alert("删除文件出错，请联系管理员")
              }else {
                //组合照片的数据
                this.PictureList=[]//组合文件上传窗口的图片列表
                this.itemView=[]//修改走马灯的图片数组
                const temp1=result.data.split('|*|')
                for (let i = 0; i < temp1.length-1; i++) {
                  let temp2 = {
                    name: temp1[i],
                    percentage: 0,
                    raw: File,
                    size: 0,
                    status: null,
                    uid: null,
                    url: filepath + temp1[i]
                  }
                  this.PictureList.push(temp2)
                  this.itemView.push(filepath+temp1[i])
                }
              }
            }
          })
        }
      }
      if (this.typeTableUse===2){
        //是换型作业的作业指导书的图片
        if (this.editVideoAndImageUse===1){
          //是换型中的作业指导书的图片
          //对图片列表中的信息进行整合
          const index = this.PictureList.findIndex(item => item.name === file.name);
          this.PictureList.splice(index,1)
          //发送请求，执行删除文件，发送的是这一行的id，记录图片地址的字符串，以及需要修改的字段，为了减少后端的写的代码，重新返回新的文件名的序列内容，并且更新。
          //组合数据，首先得到删除文件后的数据。
          console.log(file.name)
          let temp = this.tableDataScope.row.bookImage.replace(file.name+'|*|','')
          this.$request.post('/changeModelPictureRemove',{
            id:this.tableDataScope.row.id,
            fieldName:'bookImage',
            filedVal:temp,
            pictureName:file.name
          }).
          then(result=>{
            if (result.code === 401) {
              this.$router.push('UserLogin')
              alert("您未登录，请登录")
            }
            else {
              if (result.data==='删除文件时出错'){
                alert("删除文件出错，请联系管理员")
              }else {
                //组合照片的数据
                this.PictureList=[]//组合文件上传窗口的图片列表
                this.itemView=[]//修改走马灯的图片数组
                const temp1=result.data.split('|*|')
                for (let i = 0; i < temp1.length-1; i++) {
                  let temp2 = {
                    name: temp1[i],
                    percentage: 0,
                    raw: File,
                    size: 0,
                    status: null,
                    uid: null,
                    url: filepath + temp1[i]
                  }
                  this.PictureList.push(temp2)
                  this.itemView.push(filepath+temp1[i])
                }
              }
            }
          })
        }
      }
      if (this.typeTableUse===3){
        //是设备操作说明书的图片
        if (this.editVideoAndImageUse===1){
          //是换型中的作业指导书的图片
          //对图片列表中的信息进行整合
          const index = this.PictureList.findIndex(item => item.name === file.name);
          this.PictureList.splice(index,1)
          //发送请求，执行删除文件，发送的是这一行的id，记录图片地址的字符串，以及需要修改的字段，为了减少后端的写的代码，重新返回新的文件名的序列内容，并且更新。
          //组合数据，首先得到删除文件后的数据。
          console.log(file.name)
          let temp = this.tableDataScope.row.bookImage.replace(file.name+'|*|','')
          this.$request.post('/changeModelPictureRemove',{
            id:this.tableDataScope.row.id,
            fieldName:'bookImage',
            filedVal:temp,
            pictureName:file.name
          }).
          then(result=>{
            if (result.code === 401) {
              this.$router.push('UserLogin')
              alert("您未登录，请登录")
            }
            else {
              if (result.data==='删除文件时出错'){
                alert("删除文件出错，请联系管理员")
              }else {
                //组合照片的数据
                this.PictureList=[]//组合文件上传窗口的图片列表
                this.itemView=[]//修改走马灯的图片数组
                const temp1=result.data.split('|*|')
                for (let i = 0; i < temp1.length-1; i++) {
                  let temp2 = {
                    name: temp1[i],
                    percentage: 0,
                    raw: File,
                    size: 0,
                    status: null,
                    uid: null,
                    url: filepath + temp1[i]
                  }
                  this.PictureList.push(temp2)
                  this.itemView.push(filepath+temp1[i])
                }
              }
            }
          })
        }
      }
    },
    // 辅助函数：将Base64编码的字符串转换为Blob对象
    dataURItoBlob(dataURI) {
      // 分离出头部信息,得到数据部分
      let byteString;
      if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
      else
        byteString = unescape(dataURI.split(',')[1]);

      // 写入数组缓冲区
      let mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
      let ia = new Uint8Array(byteString.length);
      for (let i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
      }
      return new Blob([ia], {type:mimeString});
    },
    // 辅助函数：触发Blob对象的下载
    downloadBlob(blob, fileName) {
      let link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = fileName;
      link.click();
      window.URL.revokeObjectURL(link.href);
    },

    //单击某一个数据表的时候，做出的反应（现在函数用在了主表上）
    tableDataClick(doe,scope){
      if (doe===1){
        //现在是主表上的点击
        //把打击的单元格范围数据发送出去
        this.tableDataScope=scope
        //把数据赋值给临时的数据
        this.tableDataTemp=_.cloneDeep(scope.row)
        //组合作业指导书的内容
        //把数据进行分割
        const temp=this.tableDataTemp.workBook.split('|-|')
        const tempWork=temp[0].split('|%|')
        const tempProblem=temp[1].split('|%|')
        //对作业指导书的数据进行循环，并且进行组合
        this.workBook=[]
        if (tempWork.length===tempProblem.length){
          for (let i = 0; i < tempWork.length-1; i++) {
            let tempAll={
              id:i,
              work:tempWork[i],
              problem:tempProblem[i],
            }
            this.workBook.push(tempAll)
          }
        }
        else {
          alert("程序出错，作业指导书有异常，请联系管理员")
        }
        //对图片信息进行组合，并且展示
        if (this.tableDataScope.row.bookImage.includes('|*|')){
          //修改走马灯的图片数组
          //给图片做组合，完成图片的数据显示
          this.itemView=[]
          const temp1=this.tableDataScope.row.bookImage.split('|*|')
          for (let i = 0; i < temp1.length-1; i++) {
            this.itemView.push(filepath+temp1[i])
          }
        }
        //对修改记录进行组合
        const editRecordTemp=this.tableDataTemp.editRecord.split('|&|')
        const editRecordTempWork=editRecordTemp[0].split('|-|')
        const editRecordTempProblem=temp[1].split('|-|')
        //对作业指导书的数据进行循环，并且进行组合
        this.editRecord=[]
        for (let i = 0; i < editRecordTempWork.length-1; i++) {
          let tempAll={
            id:i,
            work:editRecordTempWork[i],
            problem:editRecordTempProblem[i],
          }
          this.editRecord.push(tempAll)
        }
        //关闭抽屉
        this.drawer=false
      }
    },
    //视频循环播放
    onVideoEnded(){
      //视频播放的函数
    }
  },
  mounted() {
    this.inquiry()
    //数据清理
    this.workBook=[]
  }
}
</script>

<style scoped>
/* 主体左侧的工作步骤栏用到的数据包围的div的样式*/

.el-footer {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
  border-left-color: white;
  border-top: white;
}

.el-aside {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
  height: 89vh;
}

.el-main {
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-left-color: white;
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.headMain{
  color: #ffffff; /* 设置字体颜色为红色 */
  font-size: 18px;
}
.center-text {
  /* 使用 margin-left 和 margin-right auto 来实现居中效果 */
  margin-left: auto;
  margin-right: auto;
  /* 注意：如果 header 内只有这两个元素，你可能不需要 margin-right: auto */
}

/*自定义样式*/

</style>